<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" 
           uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>  
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>  
</head>
<body>
<form method="post" action="SelectRoom">
  <div class="panel admin-panel" >
    <div class="panel-head"><strong class="icon-book"> 查询客房信息</strong></div>
    <div class="padding border-bottom">
      <ul class="search">
        <li>
           <div  class="field">
          <input type="text" class="input w50" placeholder="输入客房编号" size=100 name="room.rno" /> 
        </div>
          <button type="submit"  class="button border-green" ><span class="icon-search"></span> 搜索</button>
        </li>
      </ul>
    </div>
    <table class="table table-hover text-center" >
      <tr>
        <th width=10%>客房编号</th>
        <th width=10%>类型</th>       
        <th width=10%>订购价格</th>
        <th width=25%>参考图</th>
        <th width=25%>简介</th>
        <th width=10%>是否入住</th>
        <th width=10%>入住客户电话</th>       
      </tr>  
      <c:forEach items="${rooms}" var="roominfo" >    
        <tr>
          <td> ${roominfo.rno}</td>
          <td> ${roominfo.pattern}</td>
          <td> ${roominfo.price}</td>  
          <td> <img src="${roominfo.img}" style="display:none;position:absolute;left:0;top:0;right:0;bottom:0;margin:0 auto;"><img src="${roominfo.img}" style="width:200px;" class="large"></td>          
          <td> ${roominfo.introduction}</td>
          <td> ${roominfo.checkin}</td>
          <td> ${roominfo.cpnumber}</td>
          </tr>
          </c:forEach>
        
    </table>
  </div>
</form>
<script type="text/javascript">
$(".large").on("mouseover",function(){
    $(this).prev().css("display","block");
});
$(".large").on("mouseout",function(){
    $(this).prev().css("display","none");
});
</script>
</body></html>